<template>
  <div class="assign_rule">
    <el-dialog
      title="设置派工规则"
      :visible.sync="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="table_container">
        <el-table
          :data="assignRules"
          border
          tooltip-effect="dark"
          class="table_dialog">
          <el-table-column
            :class-name="'static_col'"
            prop="sort"
            label="工序序号"
            show-overflow-tooltip
            width="80px"
            align="center">
          </el-table-column>
          <el-table-column
            :class-name="'static_col'"
            prop="workstageNumber"
            label="工序编号"
            show-overflow-tooltip
            width="180px"
            align="center">
          </el-table-column>
          <el-table-column
            :class-name="'static_col'"
            prop="workstageName"
            label="工序名称"
            show-overflow-tooltip
            align="left">
          </el-table-column>
          <el-table-column label="派工规则"
                           :resizable="false">
            <el-table-column align="center" width="60px"
                             :resizable="false"
                             :class-name="'static_col'">
              <template slot-scope="scope">T -</template>
            </el-table-column>
            <el-table-column
              width="60px"
              :resizable="false"
              align="input">
              <template slot-scope="scope">
                <el-input
                  v-model.trim="scope.row.assignRule"
                  v-positive-int
                >
                </el-input>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="mes_btn">
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * @author liubaohui
 */
// store模块名称
let storeModule = 'technicalConfirm'
export default {
  name: 'AssignRule',
  data() {
    return {
      dialogVisible: false,
      assignRules: []
    }
  },
  computed: {
    workStageList() {
      return this.$store.state[storeModule].processDetail.workorderWorkstageList || []
    }
  },
  methods: {
    /**
     * 显示弹窗并接收传值
     */
    openDialog(workorderId) {
      this.dialogVisible = true
      this.init(workorderId)
    },
    /**
     * 获取详情
     */
    init(workorderId) {
      let commitObj = {
        method: 'get',
        url: `a/workorder/workorder/getworkorder/${workorderId}`,
        module: storeModule,
        state: 'processDetail'
      }
      this.$store.dispatch('saveData', commitObj)
        .then(() => {
          this.getAssignRule()
        })
    },
    getAssignRule() {
      let workStageList = JSON.parse(JSON.stringify(this.workStageList))
      workStageList.map(val => {
        val.assignRule = this.assignRuleToNum(val.assignRule)
      })
      this.assignRules = workStageList
    },
    assignRuleToNum(assignRule) {
      if (assignRule === undefined) return null
      if (assignRule.includes('-')) {
        return assignRule.split('-')[1]
      } else if (assignRule === 'T') {
        return '0'
      }
    },
    // 保存派工规则
    handleSubmit() {
      if (!this.checkAssignRules()) return false
      this.saveAssignRules()
    },
    assignRuleToStr() {
      let assignRulesCopy = JSON.parse(JSON.stringify(this.assignRules))
      assignRulesCopy.map(value => {
        value.assignRule === '0' ? value.assignRule = 'T' : value.assignRule = 'T-' + value.assignRule
      })
      return assignRulesCopy
    },
    // 保存接口
    saveAssignRules() {
      // 保存时将派工规则的数字转为 T*
      this.$store.commit('SetConfirmProcessStageList', this.assignRuleToStr())
      let commitObj = {
        method: 'post',
        url: 'a/workordertechproc/workorderTechProc/saveWorkorderTechProc',
        data: this.$store.state[storeModule].processDetail,
        noCommit: true
      }
      this.$store.dispatch('saveData', commitObj).then(() => {
        this.saveSuccess()
      })
    },
    saveSuccess() {
      this.$message.success({
        message: '保存成功',
        duration: 1500,
        center: true,
        onClose: () => {
          this.dialogVisible = false
          this.$emit('submitSuccess')
        }
      })
    },
    checkAssignRules() {
      if (this.assignRules.some(value => value.assignRule === '')) {
        this.$message.error({
          message: '请先填写派工规则',
          duration: 1500,
          center: true
        })
        return false
      }
      if (this.assignRules.some(value => !(/^\d+$/.test(value.assignRule)))) {
        this.$message.error({
          message: '派工规则只能为非负整数',
          duration: 1500,
          center: true
        })
        return false
      }
      let assignRuleArr = this.assignRules.reduce((pre, cur) => [...pre, Number(cur.assignRule)], [])
      if (assignRuleArr.concat([]).toString() !== assignRuleArr.sort((a, b) => b - a).toString()) {
        this.$message.error({
          message: '派工规则不满足按工艺顺序从大到小条件',
          duration: 1500,
          center: true
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="less">
  .assign_rule {
    .el-table thead {
      tr:last-of-type {
        display: none;
      }
    }
    .mes_dialog {
      width: 600px;
    }
  }

  td.is-input .cell {
    padding: 0 !important;
    background-color: #f5f7fa;
    .el-input__inner {
      background-color: #ffffff !important;
      height: 100% !important;
      position: absolute;
      top: 0;
      left: 0;
      &.error_input {
        color: @mesTableInputEFC;
      }
      &:focus {
        border: @mesTableInputFBorder;
      }
    }
  }
</style>

<style lang="less" scoped>

</style>
